<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>回答问题</title>

<script type="text/javascript">
	$(function(){
		if("${user}"==""){
			$('.userinfo').css('display','none');
		}else{
			$('.login_register').css('display','none');
		}
	})
</script>

<script type="text/javascript">
	$(function(){
		if("${user}"==""){
			$('.button').attr('disabled','disablde');
		}else{
		}
	})
</script>

<style type="text/css">
body{background-color: #f0f1f0
}
body div{float: left;
}
.main{background-color: white;
}
.main div{border:0px solid #999;
}
</style>


</head>
<body>

<div class = "top1" style = "width:100%;height:40px;background-color: green;">
		<div class = "userinfo" style = "margin-left: 1100px;width:400px;">
			<div class = "head" style = "margin-top:2px;width:35px;height: 35px;border-radius:40px;background-color: white;">
				<img alt="" src="${user.path }" style="width:100%;height: 100%;border-radius:40px;">
			</div>
			<div class = "username" style = "color:white;margin-top:2px;width:150px;height: 40px;line-height: 40px;margin-left: 5px;">
				${user.userName }
			</div>
		</div>
		
		<div class = "login_register" style="margin-left: 1100px;">
			<a href = "${pageContext.request.contextPath }/login.jsp" style="color:white;text-decoration: none; line-height: 40px;" >
				登录
			</a>
			<a href = "${pageContext.request.contextPath }/register.jsp" style="color:white;text-decoration: none;">
				&nbsp&nbsp&nbsp注册
			</a>
		</div>
		
	</div>


	

	
	<div class = "main" style = "padding-left:30px;padding-right:30px;margin-top:20px;width:800px;margin-left:250px;border:1px solid #ccc;">
		
		
		<div class = "questiondiv" style = "width:98%;height:110px;">
			<div class = "question" style = "font-weight:bold;border-bottom:2px solid green;font-size:25px;text-align:center;line-height:60px;width:100%;height:60px;color:green;">
				主要问题：${question.question }
			</div>
			<div class = "userinfo1" style="margin-left:340px;font-size:9px;color:#591245;width:250px;height:50px;line-height: 50px;">
				<div style = "">楼主：&nbsp</div>
				<div class = "head1" style = "margin-top:10px;width:30px;height:30px;border-radius:40px;">
					<img alt="" src="${question.path }" style = "width:100%;height:100%;border-radius:40px;">
				</div>
				<div style = "">&nbsp ${question.userName }</div>
				
			</div>
		</div>
		
		<div class = "detaildiv" style = "width:98%;height:200px;background-color: #defae9;">
			<div class = "detaill" style = "border:1px solid #999;margin-left:34px;overflow:word-wrap:break-word;width:90%;height:150px;margin-top:20px;magrin-left:50px;font-size: 16px;">
				&nbsp&nbsp&nbsp&nbsp&nbsp详细描述：${question.detail }
			</div>
		</div>
		
		
		
		<div class = "word11" style = "font-size:20px;color:green;line-height:60px;border:0px;border-bottom:2px solid green;width:98%;">
			●全部回答
		</div>
		
		<div class = "allresponsediv" style = "border-bottom:1px solid #ccc;width:98%;height:500px;overflow-y:scroll;margin-top: 20px; ">
<!-- 			这里循环 -->
			<c:forEach items="${response }" var = "n">
				<div class = "oneresponse" style = "margin-bottom:20px;background-color:#defae9;width:99%;pading-bottom:20px;">
					<div class = "response_userinfo" style = "margin-left:20px;margin-top:20px;width:98%;height:30px;">
						<div class = "response_userhead" style = "width:30px;height:30px;border-radius:40px;">
							<img alt="" src="${n.path }" style = "width:100%;height:100%;border-radius:40px;">
						</div>
						<div class = "response_username" style = "height:30px;line-height: 30px;font-size: 14px;">
							&nbsp${n.userName }
						</div>
					</div>
					<div class = "response" style = "margin:20px;">
						回答：&nbsp ${n.response }
					</div>
				</div>
			</c:forEach>
			
			
			
			

			
			
			
			
			
			

		</div>
<!-- 		我要回答 -->
		<div class = "myresponsediv" style="width:99%;height:400px;">
			<div class = "word22" style = "border:0px;border-bottom:2px solid green;width:99%;line-height: 50px;font-size: 20px;color:green;">
				●我来回答
			</div>
			
			<div class = "inputdiv" style = "margin-top:20px;background-color:#defae9;width:99%;height:220px;">
				<textarea rows="" cols="" class = "ta" style = "width:94%;height:130px;font-size:15px;margin-left:20px;margin-top: 20px;" placeholder = "请输入你的回答"></textarea>
				<div class = "btndiv" style = "width:99%;height:50px;">
					<div class = "btn" style = "margin-right:13px;margin-top:10px;width:100px;line-height: 30px;text-align:center;background-color:green;color:white;float: right;">
						提交回答
					</div>
				</div>
			</div>
			
		</div>
		
	</div>




	<a href = "${pageContext.request.contextPath }/ConversationServlet">
		返回花卉论坛
	</a>


</body>

<script type="text/javascript">
	$('.btn').click(function(){
		if($('.ta').val()==""){
			alert("输入内容不能为空");
		}else if("${user}" == ""){
			alert("请先登录");
		}else{
		$('.allresponsediv').append("		<div class = \"oneresponse\" style = \"margin-bottom:20px;background-color:#defae9;width:99%;pading-bottom:20px;\">				<div class = \"response_userinfo\" style = \"margin-left:20px;margin-top:20px;width:98%;height:30px;\">					<div class = \"response_userhead\" style = \"width:30px;height:30px;border-radius:40px;\">						<img alt=\"\" src=\"${user.path }\" style = \"width:100%;height:100%;border-radius:40px;\">					</div>					<div class = \"response_username\" style = \"height:30px;line-height: 30px;font-size: 14px;\">						&nbsp${user.userName }					</div>				</div>				<div class = \"response\" style = \"margin:20px;\">					回答：&nbsp "+ $('.ta').val()+"	</div>			</div>");
			
		$.ajax({
            url:"${pageContext.request.contextPath}/SendResponseServlet",
            async:false,
            type:"post",
            data:{'questionID':"${question.questionID}",'responseUserID':"${user.userID}",'response':$('.ta').val()},
            dataType:"json",
            success:function(d){
            	if(d.msg=="1"){
            		alert("发送成功");
            	}else{
            		alert("发送失败");
            	}
				
            }
        });
		
		$('.ta').val('');
		}
		

		
		
		
		
		
		
		
		
		
		
		
	})
</script>

</html>